---
type: tutorial
title: Crie seu primeiro projeto Astro
description: |-
  Tutorial: Construa seu primeiro blog Astro —
  Crie um novo projeto para o tutorial do Astro e se prepare para codificar
i18nReady: true
---
import Checklist from '~/components/Checklist.astro';
import Box from '~/components/tutorial/Box.astro';
import InstallGuideTabGroup from '~/components/TabGroup/InstallGuideTabGroup.astro';
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';
import Badge from "~/components/Badge.astro"

<PreCheck>
  - Executar o assistente de instalação `create astro` para criar um novo projeto
  - Iniciar o servidor do Astro em modo de desenvolvimento (dev)
  - Ver uma pré-visualização ao vivo do seu website no seu navegador
</PreCheck>

## Inicie o assistente de instalação do Astro

A forma recomendada de criar um novo site Astro é através do nosso assistente de instalação `create astro`.

<Steps>
1. Na linha de comando do seu terminal, execute o seguinte comando utilizando seu gerenciador de pacotes preferido:

    <PackageManagerTabs>
      <Fragment slot="npm">
      ```shell
      # crie um novo projeto com npm
      npm create astro@latest
      ```
      </Fragment>
      <Fragment slot="pnpm">
      ```shell
      # crie um novo projeto com pnpm
      pnpm create astro@latest
      ```
      </Fragment>
      <Fragment slot="yarn">
      ```shell
      # crie um novo projeto com yarn
      yarn create astro
      ```
      </Fragment>
    </PackageManagerTabs>

2. Confirme `y` para instalar `create-astro`
3. Quando o prompt perguntar "Where would you like to create your new project?", digite o nome de uma pasta para criar um novo diretório para seu projeto, e.x. `./tutorial`

    :::note
    Um novo projeto Astro só pode ser criado em uma pasta completamente vazia, então escolha um nome para a sua pasta que já não exista!
    :::

4. Você verá uma pequena lista de templates iniciais para escolher. Utilize as setas (cima e baixo) para navegador até o template "Empty", e então pressione return (enter) para enviar sua escolha. 

5. Quando o prompt perguntar se você planejar escrever TypeScript, digite `n`. 

6. Quando o prompt perguntar "Would you like to install dependencies?", digite `y`.

7. Quando o prompt perguntar "Would you like to initialize a new git repository?", digite `y`.
</Steps>

Quando o assistente de instalação completar, você não precisa mais desse terminal. Você agora pode abrir o VS Code para continuar.

## Abra seu projeto no VS Code

<Steps>
8. Abra o VS Code. Você será solicitado a abrir uma pasta. Escolha a pasta que você criou durante o assistente de instalação.

9. Se essa é sua primeira vez abrindo um projeto Astro, você deve ver uma notificação perguntando se você gostaria de instalar as extensões recomendadas. Clique para ver as extensões recomendadas e escolha [a extensão de suporte a linguagem do Astro](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode). Ela irá fornecer highlighting e preenchimento automático para o seu código Astro.

10. Certifique-se de que o terminal está visível e que você pode ver o prompt de comando, como:

    ```sh
    user@machine:~/tutorial$
    ```

    :::tip[Atalho de Teclado]
    Para alternar a visibilidade do terminal, utilize <kbd>Ctrl + J</kbd> (macOS: <kbd>Cmd ⌘ + J</kbd>).
    :::
</Steps>

Agora você pode utilizar o terminal direto dessa janela, ao invés do aplicativo Terminal do seu computador pelo resto deste tutorial.



## Execute Astro no modo de desenvolvimento

Para que se pré-visualize os arquivos do seu projeto _como um website_ enquanto você trabalha, você irá precisar que o Astro esteja sendo executado no modo de desenvolvimento (dev).

### Inicie o servidor de desenvolvimento

<Steps>
11. Execute o comando para começar o servidor de desenvolvimento do Astro digitando no terminal do VS Code:

    <PackageManagerTabs>
      <Fragment slot="npm">
      ```shell
      npm run dev
      ```
      </Fragment>
      <Fragment slot="pnpm">
      ```shell
      pnpm run dev
      ```
      </Fragment>
      <Fragment slot="yarn">
      ```shell
      yarn run dev
      ```
      </Fragment>
    </PackageManagerTabs>

    Agora você deve ver uma confirmação no seu terminal de que o Astro está sendo executado no modo de desenvolvimento. 🚀
</Steps>

## Veja uma pré-visualização do seu website

Seus arquivos do projeto contém todo o código necessário para mostrar um website Astro, mas o navegador é o responsável por mostrar o seu código como páginas web.

<Steps>
12. Clique no link `localhost` em sua janela do terminal para ver uma pré-visualização ao vivo do seu novo website Astro! 

    (Astro utiliza `http://localhost:4321` por padrão se a porta 4321 estiver disponível.)

    É assim que o template inicial "Empty Project" do Astro deve se parecer no seu navegador:

    ![Uma página em branco com a palavra Astro no topo.](/tutorial/minimal.png)

</Steps>

:::tip[Utilizando o servidor de desenvolvimento do Astro]

Enquanto o servidor do Astro está sendo executado no modo de desenvolvimento, você não será capaz de executar comandos na sua janela do terminal. Ao invés disso, esse painel te dará feedback enquanto você pré-visualiza o seu site.

Você pode parar o servidor de desenvolvimento a qualquer momento e retornar para o prompt de comando digitando <kbd>Ctrl + C</kbd> no terminal.

As vezes o servidor de desenvolvimento irá parar sozinho enquanto você está trabalhando. Se sua pré-visualização ao vivo parar de funcionar, volte ao terminal e reinicie o servidor de desenvolvimento digitando `npm run dev`.
:::

<Box icon="check-list">
## Checklist

<Checklist>
- [ ] Eu consigo criar um novo projeto Astro.
- [ ] Eu consigo iniciar o servidor de desenvolvimento do Astro.
</Checklist>
</Box>

### Recursos

- <p>[Começando com o Visual Studio Code](https://code.visualstudio.com/docs/introvideos/basics) <Badge class="neutral-badge" text="externo" /> — um tutorial em vídeo sobre como instalar, configurar e trabalhar com o VS Code</p>
